import React, { useState, useCallback } from "react";
import { Card, Button, Space, Table, Tooltip, message } from "antd";
import { DownloadOutlined, InfoCircleOutlined } from "@ant-design/icons";
import { DataAreaFile } from "../../types/earth";
import {
  downloadMultiFiles,
  MultiFileDownloadParams,
} from "../../api/gis";
import request from "../../utils/request";
import "./FileListCard.css";

interface FileListCardProps {
  /** 查询模式 */
  queryMode: "global" | "patrol";
  /** 选中的星球 */
  selectedPlanet?: { id: number; planet_name_zh: string };
  /** 全球数据查询相关参数 */
  globalParams?: {
    selectedTask?: string;
    selectedLevel?: string;
  };
  /** 巡视数据查询相关参数 */
  patrolParams?: {
    selectedDetectionTask?: string;
  };
  /** 无文件时的提示信息 */
  noFilesMessage: string;
  /** 卡片标题 */
  title?: string;
  /** 卡片样式 */
  style?: React.CSSProperties;
  /** 文件列表数据 */
  files?: DataAreaFile[];
  /** 是否有选区 */
  hasSelection?: boolean;
}

/**
 * 完整的文件列表卡片组件
 * 包含文件列表展示、选择、下载等完整业务逻辑
 */
const FileListCard: React.FC<FileListCardProps> = ({
  queryMode, // 暂时未使用，保留用于未来扩展
  selectedPlanet, // 暂时未使用，保留用于未来扩展
  globalParams, // 暂时未使用，保留用于未来扩展
  patrolParams, // 暂时未使用，保留用于未来扩展
  noFilesMessage,
  title = "文件列表",
  style = {
    boxShadow: "0 2px 8px #f0f1f2",
    marginBottom: 16,
  },
  files: externalFiles,
  hasSelection,
}) => {
  const [selectedFileKeys, setSelectedFileKeys] = useState<React.Key[]>([]);

  // 使用外部传入的props，如果没有则使用内部状态
  const files = externalFiles || [];

  // 通过组合判断来决定是否有选择但无文件
  const hasSelectionButNoFiles = hasSelection && files.length === 0;

  /**
   * 单文件下载 - 直接点击文件时调用
   */
  const downloadSingleFile = useCallback((file: DataAreaFile) => {
    console.log('单文件下载:', file);
    
    if (file.id && !file.data_type && !file.product_id) {
      // 批量下载订单单文件下载模式
      const downloadUrl = (request as any).getUrl(`/Management/Download?download_file_id=${file.id}`);
      window.open(downloadUrl, '_blank');
    } else if (file.data_type && file.product_id) {
      // 列表页单文件下载模式
      const downloadUrl = (request as any).getUrl(`/Management/Download?data_type=${file.data_type}&product_id=${file.product_id}`);
      window.open(downloadUrl, '_blank');
    } else {
      message.error("文件缺少必要的下载参数");
    }
  }, []);

  /**
   * 执行多文件打包下载（Order模式）
   */
  const executeDownload = useCallback(
    async (filesToDownload: DataAreaFile[]) => {
      if (filesToDownload.length === 0) {
        message.warning("没有可下载的文件");
        return;
      }

      try {
        // 多文件打包下载（Order模式）
        const validFiles = filesToDownload.filter((file) => file.data_type && file.product_id);

        if (validFiles.length === 0) {
          message.error("没有有效的文件可以下载");
          return;
        }

        const params: MultiFileDownloadParams = {
          query_params: {
            timestamp: Date.now(), // 查询的条件加时间戳
          },
          is_gis: true, // 是否为GIS下载
          is_favorites: false, // 是否为收藏夹中下载
          files: validFiles.map((file) => ({
            data_type: file.data_type!,
            product_id: file.product_id!,
          })),
        };

        const response = await downloadMultiFiles(params);

        if (response.code === 200) {
          message.success(`请到“下载订单”中查看拟下载数据的准备情况`);
          // 这里可以根据需要处理下载路径，比如跳转到下载页面
          console.log("下载路径:", response.data.download_path);
        } else {
          message.error(response.msg || "创建下载订单失败");
        }
      } catch (error: any) {
        console.error("文件下载失败:", error);
        message.error(error?.message || "文件下载失败");
      }
    },
    []
  );

  /**
   * 下载选中文件
   */
  const downloadSelected = useCallback(async () => {
    if (selectedFileKeys.length === 0) {
      message.warning("请先选择要下载的文件");
      return;
    }

    const selectedFiles = files.filter((_, index) => selectedFileKeys.includes(index));
    await executeDownload(selectedFiles);
  }, [files, selectedFileKeys, executeDownload]);

  /**
   * 下载全部文件
   */
  const downloadAll = useCallback(async () => {
    await executeDownload(files);
  }, [files, executeDownload]);

  // 如果没有文件且没有选区提示，则不渲染
  if (files.length === 0 && !hasSelectionButNoFiles) {
    return null;
  }

  return (
    <>
      {/* 文件列表显示区域 */}
      {files.length > 0 && (
        <Card
          className="file-list-card"
          style={{ ...style, boxShadow: "none", border: "1px solid #f0f0f0" }}
          size="small"
          title={
            <div className="file-table-header">
              <span>{title}</span>
              <Space className="file-action-buttons">
                <Button type="default" size="small" onClick={downloadSelected} disabled={selectedFileKeys.length === 0}>
                  <DownloadOutlined /> 下载选中
                </Button>
                <Button type="primary" size="small" onClick={downloadAll} disabled={files.length === 0}>
                  <DownloadOutlined /> 下载全部
                </Button>
              </Space>
            </div>
          }
          variant="outlined"
        >
          <div className="file-table-container">
            <Table
              size="small"
              bordered
              scroll={{ x: "max-content", y: 400 }}
              rowSelection={{
                selectedRowKeys: selectedFileKeys,
                onChange: setSelectedFileKeys,
                getCheckboxProps: (record) => ({
                  name: record.file_name,
                }),
              }}
              columns={[
                {
                  title: "文件名",
                  dataIndex: "file_name",
                  key: "file_name",
                  ellipsis: { showTitle: false },
                  className: "file-name-cell",
                  render: (text, record) => (
                    <Tooltip title={text}>
                      <span 
                        className="file-name-cell clickable-file-name" 
                        onClick={() => downloadSingleFile(record)}
                        style={{ 
                          cursor: 'pointer', 
                          color: '#1890ff',
                          textDecoration: 'underline'
                        }}
                      >
                        {text}
                      </span>
                    </Tooltip>
                  ),
                },
              ]}
              dataSource={files.map((file, index) => ({
                key: index,
                ...file,
              }))}
              pagination={{
                pageSize: 10,
                showSizeChanger: false,
                showQuickJumper: false,
                showTotal: (total) => `共 ${total} 条`,
              }}
              rowClassName={() => "file-table-row"}
            />
          </div>
        </Card>
      )}

      {/* 选区提示信息 */}
      {hasSelectionButNoFiles && (
        <Card style={style}>
          <div className="no-files-message">
            <InfoCircleOutlined style={{ marginRight: 8 }} />
            {noFilesMessage}
          </div>
        </Card>
      )}
    </>
  );
};

FileListCard.displayName = "FileListCard";

export default FileListCard;
